<template>
     <div className="timeline-player">
      <el-button @click="handlePlayOrPause" size="small" type="primary">
        <el-icon v-show="!isPlaying"><CaretRight /></el-icon>
        <el-icon  v-show="isPlaying"><VideoPause /></el-icon>
      </el-button>
      <div className="time">{{viewTime}}</div>
      <div className="rate-control">
        <!-- <Select size={'small'} defaultValue={1} style={{ width: 120 }} onChange={handleRateChange}> -->
          
        <!-- </Select> -->
        <el-text style="width: 60px;" type="info">缩放</el-text>
        <el-slider @input="setTimelineScale" :min="1" :max="10" v-model="timelineScale" />
      </div>
    </div>
</template>
<script setup>
import {onMounted,ref,getCurrentInstance} from 'vue'
import {mittTypes} from "@/util/types"
import { scaleWidth,startLeft } from '../data/timelineData';
import { useSceneStore } from '@/stores/scene'
const { appContext : { config: { globalProperties } } } = getCurrentInstance();

const internalInstance = getCurrentInstance()
const emitter = internalInstance.appContext.config.globalProperties.emitter
const props = defineProps({
  timelineState: {
    type: Object,
    default: null
  }
})
const emits = defineEmits([
  'setTimelineScale',
  'setPlaying',
  'onEnded',
])

const sceneStore = useSceneStore();
const autoScrollWhenPlay = ref(true);
const isPlaying = ref(false);
const viewTime = ref(0);
const timelineScale = ref(1);

  // 开始或暂停
  const handlePlayOrPause = () => {
    const engine = props.timelineState;
    if (! engine) return;
    if ( engine.isPlaying) {
      
      engine.pause();
    } else {
      engine.setTime(0)
      engine.play({ autoEnd: true });
    }
    isPlaying.value = engine.isPlaying
    emits('setPlaying',isPlaying.value)
    // emitter.emit(mittTypes.RENDERER.PLAY_ANIMATION,)
  };
  const play = () => {
    const engine = props.timelineState;
    if (! engine) return;
    engine.setTime(0)
    engine.play({ autoEnd: true });
    isPlaying.value = engine.isPlaying
    emits('setPlaying',isPlaying.value)
  };
  const pause = (reset) => {
    const engine = props.timelineState;
    if (! engine) return;
    if(reset){
      engine.setTime(0)
    }
    engine.pause();
    isPlaying.value = engine.isPlaying
    emits('setPlaying',isPlaying.value)
  };
  // 设置播放速率
  const handleRateChange = (rate) => {
    if (!timelineState.current) return;
    timelineState.current.setPlayRate(rate);
  };
   // 时间展示
   const timeRender = (time) => {
    const float = (parseInt((time % 1) * 100 + '') + '').padStart(2, '0');
    const min = (parseInt(time / 60 + '') + '').padStart(2, '0');
    const second = (parseInt((time % 60) + '') + '').padStart(2, '0');
    return `${min}:${second}.${float.replace('0.', '')}`;
  };
  viewTime.value = timeRender(0)
  const setTimelineScale = function(){
    emits('setTimelineScale',timelineScale.value)
  }
onMounted(() => {
    // let engine = props.timelineState

   
    if (!props.timelineState) return;
    const engine = props.timelineState;
    console.log(engine)
    let interval;
    engine.listener.on('play', () => {
      isPlaying.value = true
      emits('setPlaying',isPlaying.value)
      if( !sceneStore.isSleeping ){
        emitter.emit(mittTypes.SLEEPING_CONTROL.UPDATE_WAKEUP_STATUS)
        
      }
      interval = setInterval(() => {
        if( !sceneStore.isSleeping ){
          emitter.emit(mittTypes.SLEEPING_CONTROL.UPDATE_WAKEUP_STATUS)
        }
      }, 1000);
    });
    engine.listener.on('paused', () => {
      isPlaying.value = false
      emits('setPlaying',isPlaying.value)
      emits('onEnded',isPlaying.value)
      clearInterval(interval)
      console.log('paused')
    });
    engine.listener.on('afterSetTime', ({ time }) => {
      viewTime.value = timeRender(time);
      sceneStore.currentTimelineTime = time
    });
    engine.listener.on('setTimeByTick', ({ time }) => {
      // setTime(time);
      viewTime.value = timeRender(time)
      sceneStore.currentTimelineTime = time

      if (autoScrollWhenPlay.value) {
        const autoScrollFrom = 500;
        const left = time * (scaleWidth / timelineScale.value) + startLeft - autoScrollFrom;
        engine.setScrollLeft(left)
      }
    });
})
defineExpose({
  handlePlayOrPause,
  play,
  pause,
})

</script>
<style>
</style>